<form class="layui-form pt10" action="{:url()}" method="post" id="editForm" lay-filter="editForm">
    <div class="layui-form-item">
        <label class="layui-form-label">会员卡名</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input field-name" name="name" lay-verify="title" autocomplete="off" placeholder="请输入会员卡名">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">卡类型</label>
        <div class="layui-input-inline">
            <select name="type" class="layui-input field-type classify" lay-filter="classify" lay-verify="required" lay-search="">
              <option value="">直接选择或搜索选择</option>
              <!-- <option value="1" {if $formData && ($formData['type'] == 1)} selected {/if} class="switchType">储值卡</option> -->
              <option value="2" {if $formData && ($formData['type'] == 2)} selected {/if} class="switchType">疗程卡</option>
              <option value="3" {if $formData && ($formData['type'] == 3)} selected {/if} class="switchType">产品卡</option>
            </select>
        </div>
    </div>
    <div class="box" style='display:none'>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">充值金额</label>
                <div class="layui-input-inline">
                    <input type="text"  class="layui-input field-price1" name="price1" lay-verify="" autocomplete="off" placeholder="请输入价格">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">赠送金额</label>
                <div class="layui-input-inline">
                    <input type="text"  class="layui-input field-price2" name="price2" lay-verify="" autocomplete="off" placeholder="请输入价格">
                </div>
            </div>
        </div>

    </div>

    <div class="box" style='display:none'>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-inline">
                    <select name="project0" class="layui-input field-project_id" lay-verify="" lay-search="">
                      <option value="">直接选择或搜索选择</option>
                      {$projects|raw}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-inline">
                    <input type="text"  class="layui-input field-num10" name="num10" lay-verify="" autocomplete="off" placeholder="请输入数量">
                </div>
            </div>
            <div class="layui-btn-group" style='position:relative;bottom:3px;'>
                <button type="button" class="layui-btn add1">增加</button>
                <button type="button" class="layui-btn jian1">删除</button>
              </div>
        </div>
    </div>
    <div class="box" style='display:none'>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品名称</label>
                <div class="layui-input-inline">
                    <select name="product0" class="layui-input field-product0" lay-verify="" lay-search="">
                      <option value="">直接选择或搜索选择</option>
                      {$products|raw}
                    </select>
                    <!-- <input type="text"  class="layui-input field-price" name="product0" lay-verify="" autocomplete="off" placeholder="请输入价格"> -->
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-inline">
                    <input type="text"  class="layui-input field-num20" name="num20" lay-verify="" autocomplete="off" placeholder="请输入数量">
                </div>
            </div>
            <div class="layui-btn-group" style='position:relative;bottom:3px;'>
                <button type="button" class="layui-btn add2">增加</button>
                <button type="button" class="layui-btn jian2">删除</button>
              </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="text"  class="layui-input field-price" name="price" lay-verify="" autocomplete="off" placeholder="请输入价格">
        </div>
    </div>
    <div class="layui-form-item" style="display:none">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input field-sort" name="sort" value="10" lay-verify="" autocomplete="off">
        </div>
    </div>
    <div class="layui-inline" style="display:none">
        <label class="layui-form-label" >状态</label>
        <div class="layui-input-inline w200">
            <input type="radio" class="field-status" name="status" value="1" title="启用" checked>
            <input type="radio" class="field-status" name="status" value="0" title="禁用">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" class="field-id" name="id">
            <input type="hidden" class="field-status" name="status" value="1">
        </div>
    </div>
    <div class="pop-bottom-bar hisi-footer">
        <button type="button" class="layui-btn layui-btn-normal sub" lay-submit="" hisi-data="{pop: true, refresh: true}" lay-filter="formSubmit1" >提交保存</button>
        <a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
    </div>
</form>
{include file="system@block/layui" /}
<script>
layui.use(['func','laydate','jquery','form'], function() {
    //常规用法
    var $ = layui.jquery;
    var form = layui.form;
    var laydate = layui.laydate;
    laydate.render({
          elem: '#date',
          trigger:'click'
        });
    var num = 1
    layui.func.assign({:json_encode($formData)});
    form.on('select(classify)', function(data){
      // 1 储值卡 2疗程卡 3产品卡
      $('.box').eq(data.value-1).show()
      $('.box').eq(data.value-1).siblings('.box').hide()
      if(data.value == 2){
          num = 2
      }else if(data.value == 3){
          num = 3
      }else if(data.value == 1){
          num = 1
      }
    });

    (function(){
        // console.log()
        var num1 = 1
        var num2 = 1
        var list1 = ['project0']
        var list2 = ['product0']
        var numList1 = ['num10']
        var numList2 = ['num20']
        $(document).on('click','.sub',function(){

            var obj = form.val("editForm")
            var arr = []
            var arr2 = []
            var obj2 = null
            console.log(list1)
            if(num == 2){
                for(var i = 0;i < list1.length;i++){
                    arr.push({
                        project:obj[list1[i]],
                        num:obj[numList1[i]]
                    })
                }
            }else if(num == 3){
                for(var i = 0;i < list2.length;i++){
                    arr2.push({
                        product:obj[list2[i]],
                        num:obj[numList2[i]]
                    })
                }
            }
            console.log(num)
            obj2 = {
                name: obj['name'],
                type: obj['type'],
                price: obj['price'],
                price1: num == 1 ? obj['price1'] : '',
                price2: num == 1 ? obj['price2'] : '',
                project:arr,
                product:arr2,
                sort: obj['sort'],
                status: obj['status'],
                id:obj['id']
            }
            console.log(obj2)
            var that = $(this),
                opt = {},
                text = that.text(),
                def = {pop: false, refresh: true, jump: false, callback: null, time: 3000};


                if (that.attr('hisi-data')) {
                    opt = new Function('return '+ that.attr('hisi-data'))();
                } else if (that.attr('lay-data')) {
                    opt = new Function('return '+ that.attr('lay-data'))();
                }

                opt = Object.assign({}, def, opt);

            that.removeClass('layui-btn-normal').addClass('layui-btn-disabled').prop('disabled', true).text('提交中...');
            opt = Object.assign({}, def, opt);
            $.ajax({
                url:"{:url('add1')}",
                type:'post',
                data:obj2,
                success:function(res){
                    that.removeClass("layui-btn-disabled");
                    if (res.code == 0) {
                        that.text(res.msg).prop('disabled', false).removeClass('layui-btn-normal').addClass('layui-btn-danger');
                        setTimeout(function(){
                            that.removeClass('layui-btn-danger').addClass('layui-btn-normal').text(text);
                        }, opt.time);
                    } else {
                        that.addClass('layui-btn-normal').text(res.msg);
                        setTimeout(function() {
                            that.text(text).prop('disabled', false);
                            if (opt.callback) {
                                opt.callback(that, res);
                            }
                            if (opt.pop == true) {
                                if (opt.refresh == true) {
                                    parent.location.reload();
                                } else if (opt.jump == true && res.url != '') {
                                    parent.location.href = res.url;
                                }
                                parent.layui.layer.closeAll();
                            } else if (opt.refresh == true) {
                                if (res.url != '') {
                                    location.href = res.url;
                                } else {
                                    history.back(-1);
                                }
                            }
                        }, opt.time);
                    }
                }
            })
            return false;
        })
        $(document).on('click','.add1',function(){
            var box = $(this).parent().parent().parent()
            var len = box.find('.layui-form-item').length
            box.append(`<div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-inline">
                        <select name="project${num1}" class="layui-input field-project_id" lay-verify="required" lay-search="">
                          <option value="">直接选择或搜索选择</option>
                          {$projects|raw}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">数量</label>
                    <div class="layui-input-inline">
                        <input type="text"  class="layui-input field-price" name="num1${num1}" lay-verify="" autocomplete="off" placeholder="请输入价格">
                    </div>
                </div>
                <div class="layui-btn-group" style='position:relative;bottom:3px;'>
                    <button type="button" class="layui-btn add1">增加</button>
                    <button type="button" class="layui-btn jian1">删除</button>
                  </div>
            </div>`)
            list1.push(`project${num1}`)
            numList1.push(`num1${num1}`)
            console.log(list1)
            num1++
            form.render();
        })
        $(document).on('click','.jian1',function(){
            var box = $(this).parent().parent().parent()
            var len = box.find('.layui-form-item').length
            console.log($(this).parent().parent().index())
            if(len > 1){
                list1.splice($(this).parent().parent().index(),1)
                numList1.splice($(this).parent().parent().index() ,1)
                $(this).parent().parent().remove()
                form.render();
                console.log(list1)
            }
        })
        $(document).on('click','.jian2',function(){
            var box = $(this).parent().parent().parent()
            var len = box.find('.layui-form-item').length
            console.log($(this).parent().parent().index())
            if(len > 1){
                list2.splice($(this).parent().parent().index(),1)
                numList2.splice($(this).parent().parent().index(),1)
                $(this).parent().parent().remove()
                form.render();
                console.log(list2)
            }
        })
        $(document).on('click','.add2',function(){
            var box = $(this).parent().parent().parent()
            var len = box.find('.layui-form-item').length
            box.append(`<div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品名称</label>
                    <div class="layui-input-inline">
                        <select name="product${num2}" class="layui-input field-product${num2}" lay-verify="" lay-search="">
                          <option value="">直接选择或搜索选择</option>
                          {$products|raw}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">数量</label>
                    <div class="layui-input-inline">
                        <input type="text"  class="layui-input field-price" name="num2${num2}" lay-verify="" autocomplete="off" placeholder="请输入价格">
                    </div>
                </div>
                <div class="layui-btn-group" style='position:relative;bottom:3px;'>
                    <button type="button" class="layui-btn add2">增加</button>
                    <button type="button" class="layui-btn jian2">删除</button>
                  </div>
            </div>`)
            list2.push(`product${num2}`)
            numList2.push(`num2${num2}`)
            form.render();
            num2++
        })

    })()
});

</script>
